<script setup>
import { ref } from "vue";
import { queryReturnVisitRecordMgmt } from "@/api/User/Worker.js";
import { exportFile } from "@/utils/common";
import { ElMessage } from "element-plus";
const tableLoading = ref(false);
const seachTableRef = ref();
const formInline = ref([
  {
    type: "input",
    prop: "memberName",
    placeholder: "会员姓名",
    label: "",
    model: "",
  },
  {
    type: "input",
    prop: "memberPhone",
    placeholder: "会员手机号",
    label: "",
    model: "",
  },
  {
    type: "input",
    prop: "principalPhone",
    placeholder: "负责人手机号",
    label: "",
    model: "",
  },
  {
    type: "input",
    prop: "operatorPhone",
    placeholder: "办理人手机号",
    label: "",
    model: "",
  },
  {
    type: "input",
    prop: "registerStore",
    placeholder: "注册门店",
    label: "",
    model: "",
  },
]);
const btnLefts = ref([
  {
    label: "导出",
    plain: false,
    show: true,
    loading: false,
    img: new URL("@/assets/icon/btn-export.png", import.meta.url),
    style: "border-color:#0C268C;color:#0C268C",
    click: async () => {
      btnLefts.value[0].loading = true;
      exportFile(
        "/jy-member/mgmt/member/return/visit/record/exportReturnVisitRecordMgmt",
        "post",
        "回访情况",
        {},
        { ...formInlines.value, page: { size: 9999999, current: 1 } }
      )
        .then((res) => {
          ElMessage.success(res);
        })
        .catch(() => {
          ElMessage.error(res);
        })
        .finally(() => {
          btnLefts.value[0].loading = false;
        });
    },
  },
]);
const tableConfig = ref([
  {
    prop: "memberName",
    label: "会员姓名",
  },
  {
    prop: "memberPhone",
    label: "会员手机号",
  },
  {
    prop: "storeName",
    label: "门店名称",
    type: "slot",
    slotName: "storeName",
  },

  {
    prop: "principalName",
    label: "负责人",
    type: "slot",
    slotName: "principalName",
  },
  {
    prop: "lastVisitTime",
    label: "最近回访记录日期",
    width: "150",
    type: "slot",
    slotName: "lastVisitTime",
  },
  {
    prop: "registerStore",
    label: "注册门店",
  },
  {
    prop: "operator",
    label: "办理人",
    fixed: "right",
  },
]);

const totalPage = ref(0);
const tableData = ref([]);
const formInlines = ref();
const handlerSearch = async (formInline) => {
  formInlines.value = formInline;
  tableLoading.value = true;
  try {
    const { records, total } = await queryReturnVisitRecordMgmt(formInline);
    totalPage.value = Number(total);
    tableData.value = records;
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
};


const initSearch = () => {
  seachTableRef.value.handlerSearch();
};
defineExpose({ handlerSearch, initSearch });

</script>

<template>
  <div class="page-content mt4">
    <SeachTable
      :tableType="1"
      ref="seachTableRef"
      :forms="formInline"
      :btnLefts="btnLefts"
      :tableLoading="tableLoading"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :totalPage="totalPage"
      @handlerSearch="handlerSearch"
    >
      <template #storeName="{ row }">
        <div v-for="(item,index) in row.storeInfoMgmtInfo" :key="index">{{ item.storeName || '-' }}</div>
      </template>
      <template #principalName="{ row }">
        <div v-for="(item,index) in row.storeInfoMgmtInfo" :key="index">{{ item.principalName || '-'}}</div>
      </template>
      <template #lastVisitTime="{row}">
        <div v-for="(item,index) in row.storeInfoMgmtInfo" :key="index">{{ item.lastVisitTime || '-' }}</div>
      </template>
    </SeachTable>
  </div>
</template>

<style lang="less" scoped></style>
